<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品展示</title>
</head>

<body>
    <div class="productShow">
        <div class="product-content">
            <div class="product-btn">
                <ul>
                    <li>
                        <div class="big-btn" id="btn_jiaoyu">
                            <div class="small-btn"></div>
                        </div>
                        <span class="lispan">52教育</span>
                    </li>
                    <li>
                        <div class="big-btn" id="btn_yanj">
                            <div class="small-btnAfter"></div>
                        </div>
                        <sapn class="lispan">52眼镜店</sapn>
                    </li>
                    <li>
                        <div class="big-btn" id="btn_hait">
                            <div class="small-btnAfter"></div>
                        </div>
                        <sapn class="lispan">52嗨停</sapn>
                    </li>
                </ul>
            </div>
            <!-- 滑动块 -->
            <div class="product-cansoul">
                <!-- 轮播 -->
                <div id="myCarousel" class="carousel slide">

                    <!-- 轮播类容 -->
                    <div class="carousel-inner">
                        <!-- 第一个 -->
                        <div class="item active">
                                <div class=" study-carousel">
                                    <!-- 左右 -->
                                    <div class="study-left">
                                        <div class="left-title">
                                            <div><img id="title" src="http://first.52carlife.com/new52jiaoyu@2x.png"></img></div>
                                        </div>
                                        <div class="left-content">
                                            <p>
                                                &nbsp;&nbsp;"52教育"平台是利用先进的互联网技术,建立托辅机构与家长实时通讯的平台,是建立可靠的用户认证体系,完善家长、学生与机构的信息匹配,完善服务的系统,帮助托辅机构健全管理体系,提升服务质量。平台旨在通过互联网大数据,整合机构教育资源、社会服务资源,给学生、家长和机构提供专业、信赖、便捷的线上线下辅导教育高质量服务。
                                            </p>
                                        </div>
                                        <!-- 按钮更多 -->
                                        <div class="left-more">
                                            <!-- <button type="button" class="btn btn-default">更多</button> -->
                                        </div>
                                    </div>
                                    <!-- 右边 -->
                                    <div class="study-right">
                                        <div class="right-content">
                                            <div><img src="http://first.52carlife.com/newIphone%20Mockup%201@2x.png" alt="52嗨停"></img></div>
                                            <div><img src="http://first.52carlife.com/newIphone%20Mockup2@2x.png" alt="52嗨停"></img></div>
                                            <div><img src="http://first.52carlife.com/newIphone%20Mockup%203@2x.png" alt="52嗨停"></img></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 第二个 -->
                            <div class="item">
                                <div class="glasses-carousel">
                                    <div class="glasses_title">
                                        <img src="http://first.52carlife.com/product/threeText.png" alt="52嗨停">
                                    </div>
                                    <div>
                                        <span>#精品尽在“52”店 给你意想不到的惊喜#</span>
                                    </div>
                                    <div class="glasses-show">
                                        <!-- 第一个div -->
                                        <div class="show-left">
                                            <div>
                                                <img src="http://first.52carlife.com/new9@2x.png" alt="52">
                                            </div>
                                            <div>
                                                <img src="http://first.52carlife.com/new8@2x.png" alt="52">
                                            </div>
                                        </div>
                                        <!-- 第二个div -->
                                        <div class="show-person">
                                            <img src="http://first.52carlife.com/new%E7%9C%BC%E9%95%9C%E6%B5%B7%E6%8A%A52@2x.png"
                                                alt="52">
                                        </div>
                                        <!-- 第三个div -->
                                        <div class="show-center">
                                            <div>
                                                <img src="http://first.52carlife.com/new1@2x.png" alt="52">
                                            </div>
                                            <div>
                                                <img src="http://first.52carlife.com/new10@2x.png" alt="52">
                                            </div>
                                        </div>
                                        <!-- 第四个div -->
                                        <div class="show-right">
                                            <div>
                                                <img src="http://first.52carlife.com/new5@2x.png" alt="52">
                                            </div>
                                            <div>
                                                <img src="http://first.52carlife.com/new12@2x.png" alt="52">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <!-- 第三个轮播 -->
                        <div class="item">
                            <div class="haiStop">
                                    <div class="row">
                                        <div class="col-md-6 col-lg-6">
                                            <!-- col-md-offset-5偏移 -->
                                            <div class="haiContent-left">
                                                <div class="row">
                                                    <div class="col-md-6 col-lg-4">
                                                        <div class="hai-top">
                                                            <img src="http://first.52carlife.com/haiting52%20logo@2x.png"
                                                                alt="52">
                                                            <img src="http://first.52carlife.com/haitingHTzi2@2x.png"
                                                                alt="52">
                                                        </div>
                                                        <div class="hai-bottom">
                                                            <img src="http://first.52carlife.com/haiting%E4%B8%80%E6%AC%BE%E5%81%9C%E6%B4%97%E8%BD%A6%E7%A5%9E%E5%99%A8@2x.png"
                                                                alt="52">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 col-lg-8">
                                                        <div class="hai-top-right">
                                                            <img src="http://first.52carlife.com/haitingpic_xcx@2x.png" alt="52">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="hai-bottom-descript">
                                                    <div>以移动互联网为平台，立足柳州、面向全国，网罗全国2亿车主，深度开发汽车后市场O2O模式，为车主提供更便捷、安全、智能化的车生活体验。</div>
                                                    <div>实时更新空位数量、一键导航、在线预约车位、无感支付、闲置时段车位共享。</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-lg-6">
                                            <div class="row">
                                                <div class="col-md-6 col-lg-6">
                                                    <div class="desc-left">
                                                        <img src="http://first.52carlife.com/haiting52HTys@2x.png" alt="卡莱">
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-lg-6">
                                                    <div class="desc-right">
                                                        <img src="http://first.52carlife.com/haitingsj_52ht@2x.png" alt="卡莱">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <!-- </div> -->
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
        <script>
            $('#myCarousel').on('slide.bs.carousel', function (event) {
                var $hoder = $('#myCarousel').find('.item'),
                    $items = $(event.relatedTarget);
                //getIndex就是轮播到当前位置的索引
                var getIndex = $hoder.index($items);
                switch (getIndex) {
                    case 0:
                        $("#btn_jiaoyu > div").removeClass("small-btnAfter").addClass("small-btn");
                        $("#btn_yanj > div").removeClass("small-btn").addClass("small-btnAfter");
                        $("#btn_hait > div").removeClass("small-btn").addClass("small-btnAfter");
                        break;
                    case 1:
                        $("#btn_yanj > div").removeClass("small-btnAfter").addClass("small-btn");
                        $("#btn_jiaoyu > div").removeClass("small-btn").addClass("small-btnAfter");
                        $("#btn_hait > div").removeClass("small-btn").addClass("small-btnAfter");
                        break;
                    case 2:
                        $("#btn_hait > div").removeClass("small-btnAfter").addClass("small-btn");
                        $("#btn_jiaoyu > div").removeClass("small-btn").addClass("small-btnAfter");
                        $("#btn_yanj > div").removeClass("small-btn").addClass("small-btnAfter");

                        break;
                    default:
                        break;
                }
            })
            $("#btn_jiaoyu").on('click', function () {
                $("#btn_jiaoyu > div").removeClass("small-btnAfter").addClass("small-btn");
                $("#btn_yanj > div").removeClass("small-btn").addClass("small-btnAfter");
                $("#btn_hait > div").removeClass("small-btn").addClass("small-btnAfter");
                $('#myCarousel').carousel(0)
            })
            $("#btn_yanj").on('click', function () {
                $("#btn_yanj > div").removeClass("small-btnAfter").addClass("small-btn");
                $("#btn_jiaoyu > div").removeClass("small-btn").addClass("small-btnAfter");
                $("#btn_hait > div").removeClass("small-btn").addClass("small-btnAfter");
                $('#myCarousel').carousel(1)
            })
            $("#btn_hait").on('click', function () {
                $("#btn_hait > div").removeClass("small-btnAfter").addClass("small-btn");
                $("#btn_jiaoyu > div").removeClass("small-btn").addClass("small-btnAfter");
                $("#btn_yanj > div").removeClass("small-btn").addClass("small-btnAfter");
                $('#myCarousel').carousel(2)
            })
        </script>
</body>

</html>